<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <!-- bootstrap4 -->
    <link rel="stylesheet" href="css/release/bootstrap.min.css">
    <link rel="stylesheet" href="css/release/screen-dist.css">
    <title>五十音图 | 浊音</title>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col">
                <div class="row">
                    <div class="col jiaming-title">平假名</div>
                </div>
                <div class="row row-cols-5">
                    <!-- 第一行 -->
                    <div class="col jiaming" id="ga" data-toggle="tooltip" title="ga">が</div>
                    <div class="col jiaming" id="gi" data-toggle="tooltip" title="gi">ぎ</div>
                    <div class="col jiaming" id="gu" data-toggle="tooltip" title="gu">ぐ</div>
                    <div class="col jiaming" id="ge" data-toggle="tooltip" title="ge">げ</div>
                    <div class="col jiaming" id="go" data-toggle="tooltip" title="go">ご</div>
                    <!-- 第二行 -->
                    <div class="col jiaming" id="za" data-toggle="tooltip" title="za">ざ</div>
                    <div class="col jiaming" id="zi" data-toggle="tooltip" title="zi">じ</div>
                    <div class="col jiaming" id="zu" data-toggle="tooltip" title="zu">ず</div>
                    <div class="col jiaming" id="ze" data-toggle="tooltip" title="ze">ぜ</div>
                    <div class="col jiaming" id="zo" data-toggle="tooltip" title="zo">ぞ</div>
                    <!-- 第三行 -->
                    <div class="col jiaming" id="da" data-toggle="tooltip" title="da">だ</div>
                    <div class="col jiaming" id="di" data-toggle="tooltip" title="di">ぢ</div>
                    <div class="col jiaming" id="du" data-toggle="tooltip" title="du">づ</div>
                    <div class="col jiaming" id="de" data-toggle="tooltip" title="de">で</div>
                    <div class="col jiaming" id="do" data-toggle="tooltip" title="do">ど</div>
                    <!-- 第四行 -->
                    <div class="col jiaming" id="ba" data-toggle="tooltip" title="ba">ば</div>
                    <div class="col jiaming" id="bi" data-toggle="tooltip" title="bi">び</div>
                    <div class="col jiaming" id="bu" data-toggle="tooltip" title="bu">ぶ</div>
                    <div class="col jiaming" id="be" data-toggle="tooltip" title="be">べ</div>
                    <div class="col jiaming" id="bo" data-toggle="tooltip" title="bo">ぼ</div>
                    <!-- 第五行 -->
                    <div class="col jiaming" id="pa" data-toggle="tooltip" title="pa">ぱ</div>
                    <div class="col jiaming" id="pi" data-toggle="tooltip" title="pi">ぴ</div>
                    <div class="col jiaming" id="pu" data-toggle="tooltip" title="pu">ぷ</div>
                    <div class="col jiaming" id="pe" data-toggle="tooltip" title="pe">ぺ</div>
                    <div class="col jiaming" id="po" data-toggle="tooltip" title="po">ぽ</div>
                </div>
            </div>
            <div class="col-1"></div>
            <div class="col">
                <div class="row">
                    <div class="col jiaming-title">片假名</div>
                </div>
                <div class="row row-cols-5">
                    <!-- 第一行 -->
                    <div class="col jiaming" id="ga2" data-toggle="tooltip" title="ga">ガ</div>
                    <div class="col jiaming" id="gi2" data-toggle="tooltip" title="gi">ギ</div>
                    <div class="col jiaming" id="gu2" data-toggle="tooltip" title="gu">グ</div>
                    <div class="col jiaming" id="ge2" data-toggle="tooltip" title="ge">ゲ</div>
                    <div class="col jiaming" id="go2" data-toggle="tooltip" title="go">ゴ</div>
                    <!-- 第二行 -->
                    <div class="col jiaming" id="za2" data-toggle="tooltip" title="za">ザ</div>
                    <div class="col jiaming" id="zi2" data-toggle="tooltip" title="zi">ジ</div>
                    <div class="col jiaming" id="zu2" data-toggle="tooltip" title="zu">ズ</div>
                    <div class="col jiaming" id="ze2" data-toggle="tooltip" title="ze">ゼ</div>
                    <div class="col jiaming" id="zo2" data-toggle="tooltip" title="zo">ゾ</div>
                    <!-- 第三行 -->
                    <div class="col jiaming" id="da2" data-toggle="tooltip" title="da">ダ</div>
                    <div class="col jiaming" id="di2" data-toggle="tooltip" title="di">ヂ</div>
                    <div class="col jiaming" id="du2" data-toggle="tooltip" title="du">ヅ</div>
                    <div class="col jiaming" id="de2" data-toggle="tooltip" title="de">デ</div>
                    <div class="col jiaming" id="do2" data-toggle="tooltip" title="do">ド</div>
                    <!-- 第四行 -->
                    <div class="col jiaming" id="ba2" data-toggle="tooltip" title="ba">バ</div>
                    <div class="col jiaming" id="bi2" data-toggle="tooltip" title="bi">ビ</div>
                    <div class="col jiaming" id="bu2" data-toggle="tooltip" title="bu">ブ</div>
                    <div class="col jiaming" id="be2" data-toggle="tooltip" title="be">ベ</div>
                    <div class="col jiaming" id="bo2" data-toggle="tooltip" title="bo">ボ</div>
                    <!-- 第五行 -->
                    <div class="col jiaming" id="pa2" data-toggle="tooltip" title="pa">パ</div>
                    <div class="col jiaming" id="pi2" data-toggle="tooltip" title="pi">ピ</div>
                    <div class="col jiaming" id="pu2" data-toggle="tooltip" title="pu">プ</div>
                    <div class="col jiaming" id="pe2" data-toggle="tooltip" title="pe">ペ</div>
                    <div class="col jiaming" id="po2" data-toggle="tooltip" title="po">ポ</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 浮动菜单 -->
    <div class="float-menu">
        <div class="float-button" id="index">清音</div>
        <div class="float-button" id="aoyin">拗音</div>
    </div>
    <!--Aplayer-->
    <div id="aplayer" style="display: none;"></div>
    <!-- jq, popper, bootstrap -->
    <script src="js/release/jquery.slim.min.js"></script>
    <script src="js/release/popper.min.js"></script>
    <script src="js/release/bootstrap.min.js"></script>
    <!--Aplayer-->
    <script src="js/release/APlayer.min.js"></script>
    <!--Aplayer配置-->
    <script src="js/aplayerConfig.js"></script>
    <!--实现点击播放-->
    <script src="js/release/play-dist.js"></script>
    <!-- 浮动菜单链接 -->
    <script src="js/release/openlink-dist.js"></script>
    <!-- 启用Tooltip -->
    <script>
        $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    </script>
</body>

</html>